<template>
  <div class="page-container">
    <el-form label-position="top" class="custom-form">
      <!-- 图片目录选择 -->
      <el-form-item label="图片目录" class="form-item-group">
        <el-input
          v-model="resizeForm.inputDir"
          placeholder="选择图片目录"
          readonly
          class="form-input"
        >
          <template #append>
            <el-button
              type="primary"
              @click="selectInputDirFn"
              class="browse-btn"
              >浏览</el-button
            >
          </template>
        </el-input>
      </el-form-item>

      <!-- 输出目录选择 -->
      <el-form-item label="输出目录" class="form-item-group">
        <el-input
          v-model="resizeForm.outputDir"
          placeholder="选择输出目录"
          readonly
          class="form-input"
        >
          <template #append>
            <el-button
              type="primary"
              @click="selectOutputDirFn"
              class="browse-btn"
              >浏览</el-button
            >
          </template>
        </el-input>
      </el-form-item>

      <!-- 最大宽度 -->
      <el-form-item label="最大宽度" class="form-item-group">
        <el-input-number
          v-model="resizeForm.maxWidth"
          :min="1"
          :max="2000"
          :step="1"
          style="width: 100%"
          placeholder="请输入最大宽度"
          class="form-input"
        />
        <div class="form-help">图片宽度将不超过此值，保持比例缩放</div>
      </el-form-item>

      <!-- 最大高度 -->
      <el-form-item label="最大高度" class="form-item-group">
        <el-input-number
          v-model="resizeForm.maxHeight"
          :min="1"
          :max="2000"
          :step="1"
          style="width: 100%"
          placeholder="请输入最大高度"
          class="form-input"
        />
        <div class="form-help">图片高度将不超过此值，保持比例缩放</div>
      </el-form-item>

      <!-- 输出格式 -->
      <el-form-item label="输出格式" class="form-item-group">
        <el-select
          v-model="resizeForm.outputFormat"
          placeholder="请选择输出格式"
          style="width: 100%"
          class="form-select"
        >
          <el-option label="PNG" value="png" />
          <el-option label="JPG" value="jpg" />
          <el-option label="WebP" value="webp" />
        </el-select>
      </el-form-item>

      <!-- 处理进度 -->
      <el-form-item v-if="processing" class="progress-section">
        <div class="progress-label">处理进度</div>
        <el-progress
          :percentage="progress"
          :stroke-width="18"
          class="custom-progress"
        />
        <div class="progress-text">{{ progressText }}</div>
      </el-form-item>

      <!-- 状态提示 -->
      <el-form-item v-if="status.show" class="status-section">
        <el-alert
          :title="status.message"
          :type="status.type"
          show-icon
          class="status-alert"
        />
      </el-form-item>

      <!-- 处理按钮 -->
      <el-form-item class="button-section">
        <el-button
          type="success"
          @click="resizeImagesFn"
          :loading="processing"
          :disabled="!canProcess"
          class="primary-btn"
        >
          {{ processing ? '处理中...' : '开始处理' }}
        </el-button>
        <el-button @click="clearFormFn" class="secondary-btn">清空</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'

// 表单数据
const resizeForm = ref({
  inputDir: '',
  outputDir: '',
  maxWidth: 300,
  maxHeight: 200,
  outputFormat: 'png'
})

// 处理状态
const processing = ref(false)
const progress = ref(0)
const progressText = ref('')
const status = ref({
  show: false,
  type: 'success',
  message: ''
})

// 计算属性：是否可以开始处理
const canProcess = computed(() => {
  return (
    resizeForm.value.inputDir &&
    resizeForm.value.outputDir &&
    resizeForm.value.maxWidth > 0 &&
    resizeForm.value.maxHeight > 0 &&
    !processing.value
  )
})

// 选择图片目录
const selectInputDirFn = async () => {
  try {
    const result = await window.electronAPI.openDirectoryDialog()
    if (result && result.filePaths && result.filePaths.length > 0) {
      resizeForm.value.inputDir = result.filePaths[0]
    }
  } catch (error) {
    showStatusFn('error', `选择目录失败: ${error.message}`)
  }
}

// 选择输出目录
const selectOutputDirFn = async () => {
  try {
    const result = await window.electronAPI.openDirectoryDialog()
    if (result && result.filePaths && result.filePaths.length > 0) {
      resizeForm.value.outputDir = result.filePaths[0]
    }
  } catch (error) {
    showStatusFn('error', `选择目录失败: ${error.message}`)
  }
}

// 开始处理图片
const resizeImagesFn = async () => {
  if (!canProcess.value) return

  processing.value = true
  progress.value = 0
  progressText.value = '准备开始处理...'
  showStatusFn('info', '正在处理图片，请稍候...')

  try {
    await window.electronAPI.resizeImages(resizeForm.value)
    showStatusFn('success', '图片处理完成！')
  } catch (error) {
    showStatusFn('error', `处理失败: ${error.message}`)
  } finally {
    processing.value = false
  }
}

// 清空表单
const clearFormFn = () => {
  resizeForm.value = {
    inputDir: '',
    outputDir: '',
    maxWidth: 300,
    maxHeight: 200,
    outputFormat: 'png'
  }
  progress.value = 0
  progressText.value = ''
  status.value.show = false
}

// 显示状态提示
const showStatusFn = (type, message) => {
  status.value = {
    show: true,
    type,
    message
  }
}

// 关闭状态提示
const closeAlertFn = () => {
  status.value.show = false
}

// 监听进度更新
const progressUpdateFn = data => {
  if (data.type === 'resize-images') {
    progress.value = data.progress
    progressText.value = data.message
  }
};

// 生命周期钩子
onMounted(() => {
  window.electronAPI.onProgressUpdate(progressUpdateFn)
})

onUnmounted(() => {
  window.electronAPI.removeProgressListener()
})
</script>

<style scoped>
</style>